<!-- 分页底部组件 -->
<template>
  <el-pagination class="pagination-container" :background="background"
                 :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout" :page-sizes="pageSizes"
                 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
</template>

<script>

// 定义一个Vue组件的默认导出对象
export default {
  // 组件接收的属性（props）
  props: {
    // 总数据量，必须提供
    total: {
      required: true,
      type: Number,
      default: 0
    },
    // 当前页码，默认不提供则为undefined
    page: {
      type: Number,
      default: 1
    },
    // 每页显示的数据条数，默认为10
    limit: {
      type: Number,
      default: 10
    },
    // 可切换的每页数据条数选项，默认为[10, 20]
    pageSizes: {
      type: Array,
      default() {
        return [10, 20];
      }
    },
    // 分页布局，默认包括总数据量、数据条数选择器、上一页按钮、分页按钮、下一页按钮和跳转输入框
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    // 是否为分页按钮添加背景色，默认为true
    background: {
      type: Boolean,
      default: true
    }
  },
  // 组件内部维护的数据
  data() {
    return {
      // 当前页码，初始值为传入的page属性
      currentPage: this.page,
      // 每页显示的数据条数，初始值为传入的limit属性
      pageSize: this.limit,
    };
  },
  // 组件的方法
  methods: {
    // 处理每页数据条数变化事件
    handleSizeChange(val) {
      this.$emit('update_limit', val);
      this.pageSize = val;
      // 向父组件发送pagination事件,进行刷新
      this.$emit('pagination');
    },
    // 处理当前页码变化事件
    handleCurrentChange(val) {
      this.$emit('update_page', val);
      // 更新currentPage的值
      this.currentPage = val;
      // 向父组件发送pagination事件，进行刷新
      this.$emit('pagination');
    }
  },
};
</script>

<style scoped>.pagination-container {
  justify-content: flex-end;
  margin: 1.25rem 0;
}

</style>
